<template>
  <div 
  class="y-botton"
  :class="{'is-disabled':disabled}"
  :disabled="disabled"
  @click="$emit('click')"
  >
    <slot></slot>
  </div>
</template>
<script>
export default {
  name:'y-botton',
  props:{
    type:String,
    disabled:{
      type:Boolean,
      default:false
    }
  }
}
</script>
<style scoped>
.y-botton{
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color:#fff;
  background-color: #20af0e;
  border-color:#20af0e;
  text-align: center;
  box-sizing: border-box;
  outline:0;
  padding:12px 14px;
  font-size: 16px;
  border-radius: 4px;
  width:100%;
  
}

.is-disabled,
.is-disabled:focus,
.is-disabled:hover{
  color:#fff;
  background-color: #75b56c;
  border-color:#75b56c;
  cursor: pointer;
  pointer-events: none;
}
</style>
